<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.springframework.org/schema/jdbc">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LayuiCMSluyun</title>
    <link th:href="@{/managerstatic/plugins/layui/css/layui.css}" rel="stylesheet" media="all" />
</head>

<body>
<script th:src="@{/managerstatic/js/jquery.1.9.1.js}"></script>
<script th:src="@{/managerstatic/plugins/layui/layui.js}"></script>
<!--项目url-->
<script th:inline="javascript">
    var projecturl = [[@{/}]];
</script>

    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">

                    <div style="margin-bottom: 5px;margin-top: 5px"></div>
                    <!-- 搜索框-->
                    <div class="demoTable">
                        <div class="layui-inline">
                            <input class="layui-input" name="searContent" id="commentReload" autocomplete="off">
                        </div>
                        <button class="layui-btn" data-type="reload">按影片名搜索</button>
                        <button type="button" class="layui-btn layui-btn-danger" onclick="deleteComment()"><i class="layui-icon"></i></button>
                    </div>

                    <!--数据表格-->
                    <table class="layui-table" id="mytable" lay-filter="demofilter"></table>

                </div>
            </div>
        </li>
    </ul>
<!--行编辑按钮-->
<script type="text/html" id="barDemo">
    {{# if (d.flag ==0){}}
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">回复</a>
    {{#  } else if(d.flag ==1){ }}
    <a class="layui-btn layui-btn-xs  layui-btn-disabled">已回复</a>
    {{#  } }}
</script>

<script th:inline="none">
    var table;
    layui.use('table', function(){
        table = layui.table;
        //加载数据
        table.render({
            id:"gridtable",
            elem: '#mytable',
            url:projecturl+'comment/findAllComments',
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false  //不显示首页
                ,last: false  //不显示尾页
            },
            cols: [[
                {type:'checkbox',fixed: 'left'},
                {field:'id', width:70, title: 'ID', sort: true},
                {field: 'movename', title: '影片名字', width:150,templet:function(d){
                        return  d.cinemaMovies.movename;
                    }},
                {field:'commenttext', title: '评论内容', width:280},
                {field:'commentdate',title:'评论日期',width:180,sort:true},
                {field:'commentstar',title:'评论星数',width:120,sort:true,templet:function(d){
                        var content = "";
                        for(var i=0;i<d.commentstar;i++){
                            content = content+"<i class='layui-icon layui-icon-rate-solid' style='color:#ff7f27;'></i>";
                        }
                        for(var i=0;i<5-d.commentstar;i++){
                            content = content+"<i class='layui-icon layui-icon-rate'></i>";
                        }
                        return content;
                    }},
                {field:'telnumber',title:'评论人',width:150,templet:function(d){
                        return  d.usersInfo.telnumber;
                }},
                {fixed:'right',title:'操作', align:'center', toolbar: '#barDemo'}
            ]],
        });

        //监听工具条
        table.on('tool(demofilter)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                //获取当前评论的id
                var commentId = data.id
                //将评论id赋值给模态框
                $("#subcommentId").val(commentId);
                //打开模态框
                openModak();
            }
        });

        //打印多选框选中行数据
        table.on('checkbox(gridtable)', function(obj){
            console.log(obj.data); //选中行的相关数据
        });

        //搜索框设定
        var $ = layui.$, active = {
            reload: function(){
                var inputtext = $('#commentReload').val();
                //执行重载
                table.reload('gridtable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        "movieName": inputtext
                    }
                }, 'data');
            }
        };
        //搜索按钮触发对应的函数
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    /* 删除数据*/
    function deleteComment(){
        var checkStatus = table.checkStatus('gridtable');
        if(checkStatus.data.length==0){
            parent.layer.msg('请选择要删除的数据行！', {icon: 2});
            return ;
        }
        var ids = "";
        for(var i=0;i<checkStatus.data.length;i++){
            ids += checkStatus.data[i].id+",";
        }
        parent.layer.msg('删除中...', {icon: 16,shade: 0.3,time:3000});
        $.post(projecturl+'comment/deleteCommentByMovieId',
            {'movieId':ids},
            function(data){
                layer.closeAll('loading');
                if(data.code==200){
                    parent.layer.msg('删除成功！', {icon: 1,time:2000,shade:0.2});
                    location.reload(true);
                }else{
                    parent.layer.msg('删除失败！', {icon: 2,time:3000,shade:0.2});
                }
            }
        );
    }

    var layer;
    //打开模态框
    function openModak(){
        layui.use(['layer'],function () {
            layer = layui.layer,$=layui.$;
            layer.open({
                type:1,//类型
                title:'回复评价',           //题目
                shadeClose:false,           //点击遮罩层关闭
                content: $('#motaikunag'),   //打开的内容
                btn: ['提交', '取消'],      //弹出层的按钮
                btn1: function(){           //提交对应函数
                    submitreply();
                },
                btn2: function(){            //取消对应的按钮
                    layer.closeAll();
                }
            });
        })
    }

    //提交回复评论的请求
    function  submitreply(){
        //获取评论id
        var commentid = $("#subcommentId").val();
        //获取模态框内容
        var replytext = $("#textid").val();
        replytext = $.trim(replytext);
        if(replytext.length==0){
            alert("请输入有效内容");
            return;
        }else{
            $.ajax({
                url:projecturl+"comment/replyCommentByCinema",
                type:"post",
                data:{
                    "commentId":commentid,
                    "replytext":replytext
                },
                success:function(result){
                    if(result.code==200){
                        parent.layer.msg('评论成功!',{icon: 1,time:2000,shade:0.2});
                        layer.closeAll();
                        location.reload(true);   //重新加载数据
                    }else{
                        parent.layer.msg('评论失败！', {icon: 1,time:2000,shade:1});
                    }
                }
            });
        }
    }
</script>

<script>

</script>

<!--评价回复模态框-->
<div id="motaikunag" style="display: none">
    <div class="layui-row">
        <input type="hidden" id="subcommentId">
        <div class="layui-col-md9" style="padding-left: 10px;padding-right: 10px">
            <textarea rows="5" cols="48" id="textid"></textarea>
        </div>
    </div>
    <br>
</div>
</body>
</html>